﻿define([
    'Wjs/ui/elements/mixins/HashContainer',
    'Wjs/ui/elements/mixins/Skinnable',
    'Wjs/ui/widgets/foundation/ViewSingleContainer',
    'Wjs/ui/widgets/foundation/Header'
],
function () {
    'use strict';

    return Wjs.defineOnce({

        type: 'Panel',

        internal: {

            base: Wjs.getType('ViewHashContainer'),

            mixins: [
                Wjs.getType('Skinnable')
            ],

            initialize: function (cfg, parent) {

                this.addClass('wjs-panel');

                this.addSection('header',

                    Wjs.new('Header')
                );

                this.addSection('body',

                    Wjs.new('ViewMultipleContainer')
                        .addClass('wjs-body wjs-panel-body')
                );

                this.addSection('footer',

                    Wjs.new('ViewMultipleContainer')
                        .addClass('wjs-footer wjs-panel-footer')
                );

            }
        },

        setTitle: function (title) {

            this.getHeader().getTitle().setItem(title);

            return this;
        },

        setTextTitle: function (text) {

            return this.setTitle(

                Wjs.new('Text').setText(text)
            );
        },

        setHtmlTitle: function (html) {

            return this.setTitle(

                Wjs.new('Html').setHtml(html)
            );
        },

        setIconClass: function(iconClass) {

            this.getSection('header').setIconClass(iconClass);

            return this;
        },

        addTool: function (tool) {

            this.getSection('header').addTool(tool);

            return this;
        },

        // Add items to the body (the main container of the panel)
        addBodyItem: function(item) {

            this.getSection('body').addItem(item);

            return this;
        },

        addFooterItem: function(item) {

            this.getSection('footer').addItem(item);

            return this;
        },

        getHeader: function() {

            return this.getSection('header');
        },

        getBody: function() {

            return this.getSection('body');
        },

        getFooter: function() {

            return this.getSection('footer');
        },

        setSkin: function (name) {

            this.getBase().setSkin.call(this, name);

            this.getSection('header').setSkin(name);

            this.getSection('body').setSkin(name);

            this.getSection('footer').setSkin(name);

            return this;
        }

    });

});